// import { useStore } from 'vuex';
// import type { Store } from 'vuex';
// import type { StoreState } from '@/types/store';
export default function defaultTemplate(newComponent:any){
    // const store: Store<StoreState> = useStore();
    // const newComponent=JSON.parse(JSON.stringify(store.state.components, null, 2));
    const template=`
    <template>
      <div
        class="editor-canvas-area"
        @mousedown.stop="clearActivity"
        @dragover.prevent
        @dragleave.prevent
        @dragenter.prevent
        @drop="drop"
      >
        <div
          v-for="(cpt, index) in componentsList"
          :key="cpt.id"
          :class="'cp cp__'+cpt.id"
          :style="{
            width: cpt.size.width+'px',
            height: cpt.size.height+'px',
            transform: 'translateX('+cpt.position.left+'px) translateY('+cpt.position.top+'px)',
            zIndex: index + 1
          }"
        >
          <ComponentTransform :info="cpt" />
        </div>
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent, computed, watchEffect, ref } from 'vue';
    import { useStore } from 'vuex';
    import ComponentTransform from '../components/editor-canvas/indicators/ComponentTransform.vue';
    import dropEventHook from '@/hooks/dropEventHook';
    import type { ComputedRef, Ref } from 'vue';
    import type { Store } from 'vuex';
    import type { Component } from '@/types/component';
    import type { StoreState } from '@/types/store';
    
    export default defineComponent({
      name: 'ComponentsCanvas',
      components: {
        ComponentTransform
      },
      setup() {
        const store: Store<StoreState> = useStore();
        const newComponent=${newComponent};
        for(var i=0;i<newComponent.length;i++){
            store.commit("createComponents",{store:store,component:JSON.stringify(newComponent[i])})
        }
        const components: ComputedRef<Component[]> = computed(() => store.state.components);
        const componentsList: Ref = ref({});
        watchEffect(() => (componentsList.value = components.value));
    
        const clearActivity = (): void => {
          store.commit('setActivated', { type: 'background', component: {} });
        };
        const { drop } = dropEventHook();
    
        return {
          componentsList,
          clearActivity,
          drop,
          newComponent
        };
      }
    });
    </script>
    
    <style lang="scss">
    .cp {
      position: absolute;
      box-sizing: border-box;
      left: 0;
      top: 0;
    }
    </style>
    `
    return template;
}